<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue封装的动画</title>
    <style>
        .picture {
            width: 200px;
        }
        .cool-leave-active{
            animation: donghua 1s linear;
        }
        .cool-enter-active{
            animation: donghua 1s linear reverse;
        }
        @keyframes donghua {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(0);
            }
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
 动画
    1. 在目标元素外包裹<transition name="xxx">
    2. 编写样式：
       进入动画样式：xxxx-enter-active
       离开动画样式：xxxx-leave-active
-->
<div id="root">
    <button @click="isShow=!isShow">切换</button>
    <br><br><br>
    <transition name="cool">
        <img v-show="isShow" src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" class="picture">
    </transition>

</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data() {
            return {
                isShow: true
            }
        }
    })
</script>
</body>
</html>